var that;
// 首先创建一个类 这个tab整个盒子的内容
class Tab {
  // 类的内部的构造函数
  constructor(id) {
    that = this;
    // 获取元素
    this.tab = document.querySelector(id);
    // 获取 + 号
    this.add = this.tab.querySelector(".tabadd");
    // 获取li 父元素
    this.ul = this.tab.querySelector(".fisrstnav ul:first-child");
    // 获取section父元素
    this.tabsCon = this.tab.querySelector(".tabscon");
    // 初始化
    this.init();
  }
  // 动态更新节点
  updateNode() {
    // 获取li
    this.lis = this.tab.querySelectorAll("li");
    // 获取 section
    this.sections = this.tab.querySelectorAll("section");
    // 获取 删除按钮
    this.remove = this.tab.querySelectorAll(".icon-guanbi");
    // 获取 span
    this.spans = this.tab.querySelectorAll(".fisrstnav li span:first-child");
  }
  init() {
    // 动态更新节点
    this.updateNode();
    this.add.onclick = this.addTab;
    for (var i = 0; i < this.lis.length; i++) {
      this.lis[i].index = i;
      this.lis[i].onclick = this.toggleTab;
      this.remove[i].onclick = this.removeTab;
      this.spans[i].ondblclick = this.editTab;
      this.sections[i].ondblclick = this.editTab;
    }
  }
  // 切换
  toggleTab() {
    // 排他: 干掉所有人 保留自己
    that.clearClass();
    this.className = "liactive";
    // 此函数内this指向lis
    that.sections[this.index].className = "conactive";
  }
  // 清除样式
  clearClass() {
    for (var i = 0; i < this.lis.length; i++) {
      this.lis[i].className = "";
      this.sections[i].className = "";
    }
  }
  // 添加
  addTab() {
    // 排他: 干掉所有人 保留自己
    that.clearClass();
    // 创建 li
    var li =
      '<li class="liactive"><span>新建选项卡</span><span class="iconfont icon-guanbi"></span></li>';
    var section = '<section class="conactive">999</section>';
    // 获取父元素 追加li
    that.ul.insertAdjacentHTML("beforeend", li);
    that.tabsCon.insertAdjacentHTML("beforeend", section);
    // 新添加的元素未参与前面的点击事件 需要动态更新
    that.init();
  }
  // 删除
  removeTab(e) {
    // 阻止冒泡
    e.stopPropagation();
    // 获取父元素li的suoyinh
    var index = this.parentNode.index;
    // 删除li
    this.parentNode.remove();
    // 删除对应索引的section
    that.sections[index].remove();
    that.init(); // 刷新 更新li的最新个数
    // 删除不是选中的那个按钮 让选中的按钮 继续保持选中状态
    if (document.querySelector(".liactive")) return;
    // 删除选中的那个按钮 让选中的前面那个li成为选中状态
    index--;
    // 需要判断index的值不为负数 if 或 逻辑与判定
    that.lis[index] && that.lis[index].click();
  }
  // 编辑
  editTab() {
    //  得到这个span的值
    var str = this.innerHTML;
    // 双击禁止文字选中
    window.getSelection
      ? window.getSelection().removeAllRanges()
      : document.selection.empty();
    // 双击 获取文本框
    this.innerHTML = '<input type="text" />';
    var input = this.children[0];
    // 将span的值赋值给文本框
    input.value = str;
    input.select(); //  双击时 将input的值选中
    // input 失去焦点事件
    input.onblur = function () {
      this.parentNode.innerHTML = input.value;
    };
    // 键盘按下事件
    input.onkeyup = function (e) {
      if (e.keyCode === 13) {
        this.blur();
      }
    };
  }
}
// 实例化对象来调用这个类
new Tab("#tab");
